<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>聊天界面</title>
    <link rel="stylesheet" type="text/css" href="/js/chat.css"/>

    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/flexible.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
</head>

<script>
    $(function () {
        //当前登录的用户
        var user = JSON.parse(sessionStorage.getItem("user"));
        var params = getParams();
        //和他私信的用户id
        var id = params.userId;

        //改变已读状态
        $.ajax({
            url: "/privateLetters/state",
            data: {
                currentPage: currentPage,
                state: 0,
                type: params.type
            },
            type: "PUT"
        });

        //声明一个变量,用于当前页的增加
        var currentPage = 1;
        //总页数
        var pages;
        var kongzhi=1;
        function query() {

            $.get('/privateLetters/sumLetters', {
                currentPage: currentPage,
                loginId: user.id,
                senderId: id
            }, function (data) {
                $.each(data.list, function (index, ele) {
                    //作为接受者
                    if (user.id == ele.sender.id) {
                        var temp = "";
                        temp += '<div class="show">\n' +
                            '            <div class="time">' + ele.sendTime + '</div>\n' +
                            '            <div class="msg">\n' +
                            '                <img src=" ' + ele.sender.headImgUrl + ' " alt=""/>\n' +
                            '                <p><i clas="msg_input"></i>' + ele.content + '</p>\n' +
                            '            </div>\n' +
                            '        </div>';
                        $(".message").append(temp);

                    } else if (user.id == ele.receiver.id) {
                        var temp = "";
                        temp += '<div class="send">\n' +
                            '            <div class="time">' + ele.sendTime + '</div>\n' +
                            '            <div class="msg">\n' +
                            '                <img src=" ' + ele.sender.headImgUrl + ' " alt=""/>\n' +
                            '                <p><i clas="msg_input"></i>' + ele.content + '</p>\n' +
                            '            </div>\n' +
                            '        </div>';

                        $(".message").append(temp);
                    }
                });

                //获取总页数
                pages = data.pages;
            });
            //当前页加1
            currentPage = currentPage + 1;
        }

        query();

        //滚动事件
        $(window).scroll(function () {
            if ($(window).height() + $(document).scrollTop() + 1 >= $(document).height()) {
                if (currentPage <= pages) {
                    query();
                } else {
                    $(document).dialog({
                        type: 'notice',
                        content: '<span class="info-text">亲,没有新的信息了~</span>',
                        autoClose: 2000
                    })
                }
            }
        })

        //显示昵称

        $.get("/users/" + id, function (data) {
            var nickName = data.nickName;
            console.log(nickName);
            $(".tit").html(nickName);
        })

        //获取新的聊天内容
        var newContent;
        //保存新的聊天内容
        $("#send").click(function () {
            newContent = $(".footer input").val();
            console.log(newContent);
            var data = {
                "receiver.id": id,
                content: newContent,
                "sender.id": user.id
            }
            //发送添加聊天信息的请求
            $.post("/privateLetters", data, function (cc) {
                $(".footer input").val("");
            })

                //每隔一秒自动刷新聊天内容

                   /* setInterval(function () {
                        // alert(1);
                        $.get("/privateLetters/counts", {loginId: user.id , senderId:id}, function (data) {
                            console.log(data);
                        })
                    }, 1000);*/

        })


        //对话框
        $('.footer').on('keyup', 'input', function () {
            if ($(this).val().length > 0) {
                $(this).next().css('background', '#114F8E').prop('disabled', true);

            } else {
                $(this).next().css('background', '#ddd').prop('disabled', false);
            }
        })
        $('.footer p').click(function () {
            show(user.headImgUrl, $(this).prev().val());
        })

    })

</script>


<body>
<header class="header">
    <a class="back" href="/mine/profiles.html"></a>
    <h5 class="tit"></h5>
    <div class="right">资料</div>
</header>
<div class="message">
</div>
<div class="footer">
    <img src="/img/chat/hua.png" alt=""/>
    <img src="/img/chat/xiaolian.png" alt=""/>
    <input type="text"/>
    <p id="send">发送</p>
</div>
<script src="/js/chat.js" type="text/javascript" charset="utf-8"></script>
</body>

</html>